<template>
  <div class="flex" id="tooltip">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
       <div novalidate class="form-inline" partial>
         <div class="form-group">
           <input  type="number" class="form-control" v-model="model.f_userinfo_id" placeholder='用户编号'
           condition="f_userinfo_id = '{}'" v-next-el='yhxm'
           :size="model.f_userinfo_id ? model.f_userinfo_id.length  : 4">
         </div>
         <div class="form-group">
           <input  type="text" class="form-control" v-model="model.f_user_name" placeholder='用户姓名'
           condition="f_user_name like '%{}%'" v-next-el='yhxm'
           :size="model.f_user_name ? model.f_user_name.length  : 4">
         </div>
         <div class="form-group">
           <datepicker id="f_create_date" placeholder="生成日期"
             v-model="model.f_create_date"
             :value.sync="model.f_create_date"
             :disabled-days-of-Week="[]"
             condition="convert(varchar(10),f_create_date,120) = '{}'"
             :format="'yyyy-MM-dd'"
             :show-reset-button="reset">
          </datepicker>
         </div>
         <div class="form-group">
           <v-select id="f_send"
             v-model="model.f_send"
             placeholder='发送状态'
             :value.sync="model.f_send"
             :options='$parent.$parent.sendType'
             condition= "f_send = '{}'"
             close-on-select>
           </v-select>
         </div>
         <div class="form-group">
           <button class="btn btn-success" @click="$parent.$parent.delete()" v-el:cba>删除</button>
           <button class="btn btn-success" @click="$parent.$parent.search()" v-el:cba>查询</button>
           <button class="btn btn-success" @click="$parent.$parent.sendMessage()" v-el:cba>发送</button>
           <export-excel :data="{items: 'f_userinfo_id,f_user_name,f_user_phone,f_user_id, f_gas,f_amount,f_balance,f_arreamount,f_arrears_date,f_create_date,f_send_content,f_send,f_send_date, f_filiale,f_outlets',
           orderitem: 'id',tablename: 't_information',
           condition: condition}" bean='短信详情导出' sqlurl="rs/logic/exportfile"></export-excel>
         </div>
       </div>
      </criteria>
      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <input type="checkbox"  @click="$parent.$parent.$parent.isAll(model.pageIndex)">
            </th>
             <th>序号</th>
             <th>用户信息</th>
             <th>欠费日期</th>
             <th>气量</th>
             <th>金额</th>
             <th>账户结余</th>
             <th>欠费金额</th>
             <th>发送信息</th>
             <th>状态</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align:center">
            <input type="checkbox" v-model="$parent.$parent.$parent.ids"
            :value="row.id">
          </td>
          <td style="text-align:center">{{$index+1}}</td>
          <td style="text-align:center">{{row.f_userinfo_id}}&nbsp;&nbsp;{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone}}</td>
          <td style="text-align:center">{{row.f_arrears_date}}</td>
          <td style="text-align:center">{{row.f_gas}}</td>
          <td style="text-align:center">{{row.f_amount}}</td>
          <td style="text-align:center">{{row.f_balance}}</td>
          <td style="text-align:center">{{row.f_arreamount}}</td>
          <td style="text-align:center">
            <span title="{{row.f_send_content}}">{{row.f_send_content.substring(0,3)}} ...</span>
          </td>
          <td style="text-align:center">{{row.f_send}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
/**
*阶梯水价查询列表
*/
import { PagedList } from 'vue-client'
import * as Util from '../../../Util'
import AppData from '../../../../stores/AppData'
export default {
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 20,
       {orderitem: '"' + this.orderitem + '"',
        items: '"' + this.items + '"', tablename: '"' + this.tablename + '"'}),
      f_send: '未发送',
      ids: [],
      pages: []
    }
  },
  props: {
    items: {
      type: String,
      default: '*'
    },
    orderitem: {
      type: String,
      default: 'f_userinfo_id'
    },
    tablename: {
      type: String,
      default: 't_information'
    },
    condition: {
      type: String
    }
  },
  ready () {
    this.search()
  },
  methods: {
    delete () {
      if (this.ids.length !== 0) {
        this.model.condition = this.model.condition + 'and id in (' + this.ids + ')'
      }
      this.$showMessage('删除后不可恢复，确认删除？', ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          this.$LogicService.deletMessage(this.model.condition).then((res) => {
            this.$dispatch('success')
          }).catch((error) => {
            this.$dispatch('error', error)
          })
        }
      })
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    selfSearch (args) {
      // this.condition = ' and convert(varchar(10),f_create_date,120) = ' + "'" + Util.toStandardDateString() + "'"
      if (!Util.f.parent.parent.name.includes('统一资源管理')) {
        args.condition = `${args.condition} and f_filiale = '${Util.f.f_fengongsi}'`
      }
      // args.condition += this.condition
      this.model.search(args.condition, this.model)
    },
    sendMessage () {
      if (this.ids.length !== 0) {
        this.model.condition = this.model.condition + 'and id in (' + this.ids + ')'
      }
      this.$LogicService.sendMessage(this.model.condition).then((res) => {
        this.$dispatch('success')
      }).catch((error) => {
        this.$dispatch('error')
      })
    },
    isAll (page) {
      if (this.pages.includes(page)) { // 已添加,取消动作
        // 从ids中删除本页所有数据的ids
        this.addOrRemove(false)
        this.pages = this.pages.filter((item) => {
          return item !== page
        })
      } else { // 未添加
        this.pages.push(page) // 添加id，添加动作
        this.addOrRemove(true)
      }
    },
    addOrRemove (is) {
      let that = this
      if (is) { // 添加本页所有数据到ids中
        this.model.rows.forEach((row) => {
          if (!that.ids.includes(row.id)) {
            that.ids.push(row.id)
          }
        })
      } else { // 从ids中取消所有的数据
        this.model.rows.forEach((row) => {
          that.ids = that.ids.filter((item) => {
            return item !== row.id
          })
        })
      }
    }
  },
  computed: {
    sendType () {
      return [{label: '全部', value: ''}, ...AppData.getParam('发送状态')]
    }
  }
}
</script>
<style>
  #tooltip {
    height: auto;
  }
</style>
